<template>
  <div class="home">
    <!-- 布局 -->
    <el-container>
      <!-- 头部 -->
      <el-header>
        <!-- 标签页 -->
        <div>
          <el-tabs @tab-click="handleClick" v-model="activeName">
            <el-tab-pane label="用户" name="first"></el-tab-pane>
            <el-tab-pane label="教学" name="second"></el-tab-pane>
            <el-tab-pane label="题库" name="third"></el-tab-pane>
            <el-tab-pane label="运营" name="fourth"></el-tab-pane>
            <el-tab-pane label="商品" name="shop"></el-tab-pane>
            <el-tab-pane label="财务" name="list"></el-tab-pane>
          </el-tabs>
        </div>
      </el-header>
      <el-container>
        <!-- 左边 -->
        <el-aside width="200px">
          <el-row class="tac">
            <el-col :span="24">
              <el-menu default-active="/" class="el-menu-vertical-demo" :router="true">
                <el-menu-item index="/student" to="/student">
                  <span slot="title">学员管理</span>
                </el-menu-item>
                <el-menu-item index="/teacher" to="/teacher">
                  <span slot="title">讲师管理</span>
                </el-menu-item>
                <el-menu-item >
                  <span slot="title">助教管理</span>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
       activeName: 'first'
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>

<style scoped>
.el-header,
.el-footer {
  background-color: rgb(72, 72, 192);
  color: #333;
  text-align: center;
  line-height: 60px;
}
/deep/ .el-tabs__item{
  color: white
}
.el-aside {
  background-color: white;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
/deep/ .el-menu-item.is-active{
  color: rgb(0, 0, 248);
}
/deep/ .el-main{
  padding: 0;
}
</style>
